<template>
    <div>
        <div>
            <v-card>
                <v-card-title>
                    <v-text-field
                            v-model="search"
                            prepend-icon="search"
                            label="搜索"
                            single-line
                            hide-details
                    ></v-text-field>
                    <v-spacer></v-spacer>
                    <div class="handle-box">
                        <el-button type="danger" icon="delete" class="handle-del mr10" @click="delMultiple">批量移除</el-button>
                        <el-button type="primary" @click="addSongs">添加歌曲</el-button>
                    </div>
                </v-card-title>
            </v-card>
        </div>
        <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :default-sort = "{prop: 'name', order: 'descending'}"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    sortable
                    label="歌曲名称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="singer.name"
                    sortable
                    label="歌手名称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="count"
                    sortable
                    label="播放次数"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                search: '',
                page: 1,
                id: '',
                tableData: [],
                multipleSelection: [],
            }
        },
        created() {
            this.getDataServer()
        },
        methods: {
            addSongs() {
                this.$router.push("/song/ChooseSongs?id="+this.id);
            },
            getDataServer() {
                this.id =this.$route.query.id;
                this.$http.get("/songlist/list/song?id="+this.id).then(resp=>{
                    this.tableData = resp.data
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delMultiple() {

            },
            handleDelete(index, row) {
                this.$http.get("/songlist/song/delete",{
                    params:{
                        id: this.id,
                        sid: row.id
                    }
                }).then(()=>{
                    this.$message.success("移除成功")
                    this.getDataServer()
                }).catch(()=>{
                    this.$message.success("移除失败")
                })
            },
            delMultiple() {
                console.log(this.multipleSelection)
                const sids = this.multipleSelection.map(s=>s.id).join(",")
                this.$http.get("/songlist/song/deleteMutiple",{
                    params: {
                        id: this.id,
                        sids: sids
                    }
                }).then(()=>{
                    this.$message.success("移除成功")
                    this.getDataServer()
                }).catch(()=>{
                    this.$message.success("移除失败")
                })
            }
        }
    }
</script>

<style scoped>

</style>